<template>
  <div class="shopping">
    <search-goods></search-goods>
    <shopping-goods-list :goodsSelectList="goods" v-if="goods.length >0" @selectGoods="getSelectedGoods" @selectAllGoods="getAllGoods"></shopping-goods-list>
    <p v-else class="f12" style="color: #ccc">{{erronData}}</p>
  </div>
</template>

<script>
    import searchGoods from '@/components/search-goods';
    import shoppingGoodsList from '@/components/shopping-goods-list';
    export default {
        name: 'shopping',
        components: {
          searchGoods,
          shoppingGoodsList
        },
        data () {
           return {
             goods: [],
             erronData: '未添加任何商品！',
             selectGoods: []
           };
        },
        methods: {
          getSelectedGoods (selectGoods) {
            this.selectGoods.push(selectGoods);
          },
          deleteGoods (deleteGoods) {
            this.goods = deleteGoods;
          },
          getAllGoods (goodsMath) {
            this.selectGoods = goodsMath;
          }
        },
        created () {
        }
    };
</script>

<style lang="stylus" scoped>
  .shopping
    p
    text-align center
</style>
